<template>
  <div class="wuliu">
    <van-nav-bar
                 left-arrow
                 class="van-navbar"
                 @click-left="onClickLeft"
        >
          <template v-slot:title>
            <h2 style="margin-top:50px">{{$route.meta.title}}</h2>
          </template>
    </van-nav-bar>
    <!-- 卡片 -->
    <van-card class="van-card"
              @click='nextll'
              v-for="item in 8"
              :key="item">
      <template v-slot:title>
        <span class="van-title">你的快递已签收</span>
      </template>
      <template v-slot:desc>
        <span class="van-desc"><br>你购买的华为P20手机壳及高清钢化膜,订单已经签收</span>
      </template>
      <template v-slot:thumb>
        <img src="../../assets/images/touxiang4.png"
             alt="">
      </template>
      <template v-slot:price>
        <span style="font-size:14px">来自14723598469</span>
      </template>
      <template v-slot:num>
        <span style="font-size:14px">2022/3/22</span>
      </template>
    </van-card>
  </div>
</template>

<script>
export default {
  name: 'Wuliu',
  methods: {
    // 点击，返回上一页
    onClickLeft() {
      // console.log(this.$router)
      this.$router.back() // 编程式的导航
    },
    nextll() {
      this.$router.push('/wuliuchakan')
    },
  },
}
</script>

<style lang="less" scoped>
.van-navbar{
  // margin-top: 10px;
  height: 80px;
}
/deep/ .van-icon{
  margin-top: 40px;
  font-size: 30px;
}
.van-nav-bar /deep/.van-icon {
  color: #333;
}
 .van-card {
  // border: 1px solid red;
  background: #f0efec;
  border-radius: 20px;
  height: 120px;
  margin: 20px auto;
}
.van-title {
  font-size: 20px;
  font-weight: 900;
}
.van-desc {
  font-size: 14px;
  color: black;
}
</style>
